<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>OA模拟与实现</title>
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}"></link>
    <link rel="stylesheet" th:href="@{/css/authoruty.css}"></link>
    <link rel="stylesheet" th:href="@{/css/file.css}"></link>
    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>

    
<style>
</style>
</head>
<body>
    <div class="container-fluid">
        <ol class="breadcrumb nav-top">
            <li><a th:href="@{~/router/index.html}" target="main">首页</a></li>
            <li class="active">编辑</li>
        </ol>
        <div class="panel panel-info">
            <div class="panel-heading">编辑</div>
            <div class="panel-body">
                <form action="/user/addPeople" method="post" class="form-inline align-self-center">
                    <div id="test-editor1">
                        <label for="dname">姓名：</label>
                        <input name="oname" id="dname"/>
                    </div>
                    <div class="">
                        <label for="position"><span>职位：</span></label>
                        <select name="oposition" id="position">
                            <option readonly="" selected>--请选择--</option>
                            <option th:each="position : ${positionList}" th:if="${position.id!=1}" th:value="${position.id}" th:text="${position.positionname}"></option>
                        </select>
                    </div>
                    <div class="course" style="display: none">
                        <label for="course"><span>课程：</span></label>
                        <select name="ocourse" id="course">
                            <option readonly selected>--请选择--</option>
                            <option th:each="course : ${courseList}" th:value="${course.id}" th:text="${course.coursename}"></option>
                        </select>
                    </div>
                    <div id="test-editor">
                        <label for="odepart">专业：</label>
                        <select name="odepart" id="odepart">
                            <option readonly selected>--请选择--</option>
                            <option th:each="depart : ${departList}" th:value="${depart.id}" th:text="${depart.major}">讲师</option>
                            <!--<option value="">辅导员</option>-->
                        </select>
                    </div>
                    <div id="test-editor2">
                        <label for="office">办公室：</label>
                        <select name="ooffice" id="office">
                            <option readonly selected>--请选择--</option>
                            <option th:each="office : ${officeList}" th:value="${office.id}" th:text="${office.location}"></option>
                        </select>
                    </div>
                    <div class="">
                        <div class="">
                            <button type="submit" class="btn btn-info">添加</button>
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
        
    </div>
</body>
<script>
    $(function(){
            $("#position").change(function(){
                var p = $("#position option:selected").text();
                if(p=="讲师"){
                    $(".course").css("display","block");
                }else if(p=="辅导员"){
                    $(".course").css("display","none");
                }
            })
    })
</script>
</html>